import { Component, OnInit } from '@angular/core';
import { HttpRequest } from "../../../service/httpRequest";

import * as echarts from 'echarts';

@Component({
  selector: 'chart-runload',
  template: `
      <p>
      <span>设备正在加载台数</span>：
      <span>{{runData[0]}}台</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <span>设备未加载台数</span>：
      <span>{{runData[1]}}台</span>
    </p>
    <div id="runload" style="height: 260px;font-size:12px"></div>
  `
})
export class RunloadComponent implements OnInit {

  option;
  myRun:any;
  runData:Array<number> = [0,0];

  constructor(private httpRequest:HttpRequest) { }

  ngOnInit() {
    this.myRun = echarts.init(document.getElementById('runload'));
    this.paintRun();
  }

  paintRun(){
    var ti1_cn = '设备加载率';
    var suti1_cn = '设备加载总数占设备运行数的比例';
    var sm1_cn = '比例';
    var para11_cn = '加载中';
    var para21_cn = '未加载';  

    this.httpRequest.sendGet('stat/online').subscribe(res => {
      this.runData = res;
        this.run(ti1_cn,suti1_cn,sm1_cn,para11_cn,para21_cn,res);    
    },err => console.log(err));
  }

  run(ti,suti,sm,para1,para2,data) {
    this.option = {
      title: {
        text: ti,
        subtext: suti,
        x: 'center'
      },
      tooltip: {
        trigger: 'item',
        formatter: "{b} <br/>{a} : {c} ({d}%)"
      },
      legend: {
        orient: 'vertical',
        left: 'left',
        data: [para1, para2]
      },
      series: [{
        type: 'pie',
        name: sm,
        radius: '55%',
        center: ['50%', '60%'],
        data: [
          {name:para1, value:data[0],color:'red'},
          {name:para2, value:data[1],color:'red'}
        ],
        itemStyle: {
          emphasis: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          },
          normal: {
            label:{
              show: true,
              formatter: '{b} : ({d}%)'
            }
          }
        }
      }],
      color:['#78C864','#DC8C46']
    };
    this.myRun.setOption(this.option);
  }

}
